<template>
    <div class="custom-service-online">
        <div class="title">
            <i class="el-icon-search" @click="doSearch"></i>
            <el-input v-model="search" class="title-input" placeholder="搜索的用户名" @keydown.native.enter="doSearch"/>
        </div>

        <div v-for="(item, index) in showList" :key="index" class="online-item" @click="setDialogueName(item)">
            
            <div class="online-item-name">
                <i class="el-icon-user-solid"></i>
                {{ item }}
            </div>

            <div class="me-flag" v-if="onLineName === item">me</div>
        </div>
    </div>
</template>
 
<script>
export default {
    name: 'custom-service-online',
    data() {
        return {
            isSearch: false,
            search: '',
            searchList: []
        }
    },
    props: ['showOnLine', 'onLineName'],
    computed: {
        showList() {
            if (this.isSearch) {
                return this.searchList;
            } else {
                return this.showOnLine;
            }
        }
    },
    watch: {
        showOnLine() {
            this.isSearch = false
        }
    },
    methods: {
        // 查询功能
        doSearch() {
            this.searchList = []
            this.isSearch = true

            for(var onLine of this.showOnLine) {
                if (onLine.indexOf(this.search) !== -1) {
                    this.searchList.push(onLine)
                }
            }

            this.search = ''
        },
        // 当前聊天的对象的Name
        setDialogueName(name) {
            if (name !== this.onLineName) {
                this.$emit('dialogueName', name)
            }

        }
    },
}
</script>
 
<style scoped>
.custom-service-online{
    width: var(--onLine-list-width);
    box-sizing: border-box;
    background-color: #DFDFDF;
    border-left: 1px solid #DFDFDF;
    user-select: none;
}

.title{
    background-color: #fff;
    height: 30px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    cursor: pointer;
}

.title >>> input{
    border: none;
    height: 30px;
}


.online-item{
    display: flex;
    padding: 10px;
    height: 20px;
    justify-content: space-between;
}

.online-item:hover{
    background-color: #aba5a5;
    cursor: pointer;
}

.online-item-name{
    font-size: 18px;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 13px;
    margin-left: 5px;
    box-sizing: border-box;
}

.me-flag{
    height: 20px;
    width: 40px;
    line-height: 20px;
    text-align: center;
    color: rgb(111, 162, 171);
}
</style>